<template>
  <div
    class="analysis-tool-body-3-item"
    v-for="(item, index) in tiaojianList"
    :key="index"
  >
    <div class="left">
      <div class="left-item">
        <el-select
          v-model="value"
          clearable
          placeholder="请选择字段"
          style="width: 240px"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select v-model="value" placeholder="比较符" style="width: 240px">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="left-item">
        <el-select
          v-model="value"
          clearable
          placeholder="关键字"
          style="width: 240px"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select v-model="value" clearable style="width: 240px">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
    </div>
    <div class="right" >
        <el-icon @click="addTiaojian(index)"><CirclePlus/></el-icon>
        <el-icon v-if="index!== 0" @click="deleteTiaojian(index)"><CircleClose /></el-icon>
    </div>
  </div>
</template>
<script>
export default {
  name: "queryDetails",
  data() {
    return {
      tiaojianList: [{
        field: "", // 字段
        operator: "", // 比较符
        keyword: "", // 关键字
      }],
    };
  },
  methods: {
    addTiaojian(index) {
        if(this.tiaojianList.length  !=index+1){
            return
        }
      this.tiaojianList.push({
        field: "", // 字段
        operator: "", // 比较符
        keyword: "", // 关键字
      });
    },
    deleteTiaojian(index) {
      this.tiaojianList.splice(index, 1);
    },
    resetTiaojian(){
      this.tiaojianList= [{
          field: "", // 字段
          operator: "", // 比较符
          keyword: "", // 关键字
       }]
    } 
  },
};
</script>
<style lang="scss" scoped>
.analysis-tool-body-3-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  .left {
    width: calc(100% - 50px);
    .left-item {
      display: flex;
      align-items: center;
      .el-select {
        height: 37px;
        margin-right: 10px;
      }
    }
  }
  .right {
    width: 50px;
    font-size: 24px;
    color: #2f5dd8;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .el-icon:first-child{
        margin-bottom: 10px;
    }
  }
}
</style>